 html{overflow: hidden;}

 .content{
    width:100vw;
    height: 100vh;
    position: relative;
}
  

.title{
    position: relative;
    height: 8%;
    width: 100%; 
    background: #000;
    color: #fff;
    font-size: 20px;
    text-align: center; 
    line-height: 45px; 
    z-index: 99;
}
.item{/*公共部分*/
    width:100%;
    height: 92%;
    position: relative; 
    /*-webkit-animation: item 1s ease;*/
}
/*.item1{top:-5%;}*/
@-webkit-keyframes item
{
    from{transform:translate(0,200px); opacity: 0.5}
    to{transform:translate(0,0px);opacity: 1}
}
@-webkit-keyframes item2
{
    from{transform:translate(0,-200px); opacity: 0.5}
    to{transform:translate(0,0px);opacity: 1}
}

.item3,.item2{display: none;} 
.item1 img{ 
    width:100%;
    height:100%;
    position: absolute; 
}

.battery{  /*电池*/
    width:180px;
    height: 180px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -90px;
    margin-top: -90px;
     -webkit-animation: summer_img 1s linear;
 }
.battery img{ 
    width:100%;
    height:100%;
}

.charge{   /*得瑟这一夏文字*/
    width:142px;
    height:32px;
    position: absolute;
    top: 57%;
    left: 50%;
    margin-left: -75px;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}
.charge img{
    width:100%;
    height: 100%;
    animation: charge 2s ease;
    -webkit-animation: charge 2s ease;
}

.shan{    /*电*/
    width: 67px;
    height: 67px; 
    position: absolute;
    top: 73%;
    left: 50%;
    margin-left: -33px;
} 
.pre_box{   /*箭头box*/
    position: relative;
    top: 95%;
    -webkit-animation: pre_box 1s linear  infinite;
}
.pre{     /*箭头pre*/
    height: 14px;
    width: 5px;
    position: absolute;
    top: 95%;
    left: 50%;
    background: #fff;
    /*-webkit-animation: pre_box 1.5s linear infinite;*/
}
.pre1{/*箭头pre*/
    margin-left: -4px;
    transform: rotate(-130deg);
    -webkit-transform: rotate(-130deg);
}
.pre2{/*箭头pre*/
    margin-left: 5px;
    transform: rotate(130deg);
    -webkit-transform: rotate(130deg);
}


@-webkit-keyframes charge
{
    0%{transform:rotateY(0) scaleX(1) scaleY(1);} 
    50%{transform: rotateY(180deg) scaleX(1.4) scaleY(1.4);}}
    100%{transform:rotateY(360deg)  scaleX(1) scaleY(1);;}
}
 
@-webkit-keyframes battery
{
    from{opacity: 0.3;left: 15%}
    to{opacity: 1;left: 50%}

}
@-webkit-keyframes pre_box
{
    0%{opacity: 0;;top: 95%;}
    40%{opacity: 1;top: 93%;}
    100%{opacity: 0;top: 92%;}
}


/*page2*/
.item2_bg{ 
    opacity: 0.7
}
.bg21{
    width: 50%;
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;
}
.bg22{
    width: 50%;
    height: 50%;
    position: absolute;
    top: 0;
    left: 50%;
}
.bg23{
    width: 50%;
    height: 50%;
    position: absolute;
    top: 50%;
    left: 0;
}
.bg24{
    width: 50%;
    height: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
}
.bg_color{
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.8;
    position: absolute;
}
.charge_red{
    width: 245px;
    height: 128px;
    position: absolute; 
    left: -5%; 
    -webkit-animation: charge_red 1s ease;
}

 
@-webkit-keyframes charge_red{
    0%{-webkit-transform: rotateZ(0deg);}
    100%{-webkit-transform: rotateZ(360deg);}
}

.textbox{
    position: absolute;
    top: 60%;
    left: 6%;
    -webkit-perspective:1000px;
}
.summer1{     
    vertical-align:middle; 
}
.summer_img{   
    float: left;
    -webkit-animation: summer_img 1s ease;
}

@-webkit-keyframes summer_img{
    0%{
        opacity: 0.5;
        -webkit-transform: translateX(-100px);}
    100%{
        opacity: 1;   
        -webkit-transform: translateX(0px);}
}


.summer_text{  
    float: left;
    height: 35px;
    padding:0 6px;
    margin-top: 8px;
    margin-left: -2px;
    line-height: 35px;
    font-size: 24px; 
    color: #fff;   
    background: rgba(227,47,47,0.95);
}
.bigthing{  
    height: 30px;
    overflow: hidden; 
    margin-left: 2px; 
    -webkit-animation: bigthing 1s ease;
}


@-webkit-keyframes bigthing{
    0%{
         -webkit-transform: rotateZ(0deg);
    }
    10%{
        -webkit-transform: rotateZ(4deg);
    }
    20%{
        -webkit-transform: rotateZ(0deg);
    }
    30%{
        -webkit-transform: rotateZ(-4deg);
    }
    40%{
        -webkit-transform: rotateZ(0deg);
    }
    50%{
        -webkit-transform: rotateZ(4deg);
    }
    60%{
        -webkit-transform: rotateZ(0deg);
    }
    70%{
        -webkit-transform: rotateZ(-4deg);
    }
    80%{
        -webkit-transform: rotateZ(0deg);
    }
    90%{
       -webkit-transform: rotateZ(4deg);
    } 
    100%{
        -webkit-transform: rotateZ(0deg);
    }
}
.bigthing img{ 
     margin-top: -60px;
}
.moshou{
    width:85%;
    height: 60px;  
    float: left;
    margin-left: 2px; 
    padding-left: 10px; 
    z-index: 99;
    position: relative;
    -webkit-transform: translateZ(80px);

}
.moshou img{
    margin-top: -8px;
    position: absolute;
    z-index: 99;
}
.red_color1{
    height: 60px;
    width: 200px;
    position: absolute;
    top:0;
    background: rgba(227,47,47,0.7);
    -webkit-animation: red_color 1s ease 0.2s;
    /*-webkit-transform: translateZ(-100px);*/
} 

.red_color{ 
    height: 60px; 
    width: 200px;
    position: absolute;
   top:0;
   left: 20%;
    background: rgba(227,47,47,0.7);
    -webkit-animation: red_color 1s ease;
} 
@-webkit-keyframes red_color{
    0%{
         -webkit-transform: rotateX(-60deg);
    }
    10%{
        -webkit-transform: rotateX(-30deg);
    }
    20%{
        -webkit-transform: rotateX(0deg);
    }
    30%{
        -webkit-transform: rotateX(30deg);
    }
    40%{
        -webkit-transform: rotateX(0deg);
    }
    50%{
        -webkit-transform: rotateX(-30deg);
    }
    60%{
        -webkit-transform: rotateX(0deg);
    }
    70%{
        -webkit-transform: rotateX(30deg);
    }
    80%{
        -webkit-transform: rotateX(0deg);
    }
    90%{
       -webkit-transform: rotateX(-30deg);
    } 
    100%{
        -webkit-transform: rotateX(0deg);
    }
}

.bg31{
    width: 50%;
    height: 55%;
    position: absolute;
    top: 0;
    left: 0;
}
.bg32{
    width: 50%;
    height: 55%;
    position: absolute;
    top: 0;
    left: 50%;
}
.bg33{
    width: 100%;
    height: 45%;
    position: absolute;
    top: 55%;
    left: 0%;
}
 
.text_for span{
    width: 80px;
    display: block;   
    font-weight: bold;
    font-size: 24px; 
    padding:0 6px;
    line-height: 30px;
    color: #fff;   
    background: rgba(227,47,47,0.95);
    text-align: right;
    -webkit-animation: summer_img2 1s ease;
}
.text_girl span{
    width: 80px;
    display: block;
    font-weight: bold;
    font-size: 24px; 
    padding:2px 6px;
    line-height: 30px;
    color: #fff;   
    background: rgba(227,47,47,0.95);
    text-align: right;
    -webkit-animation: summer_img2 1s ease;
}
.girl{  
    height: 30px;
    overflow: hidden; 
    margin-left: 2px;
    -webkit-animation: bigthing 1s ease;
   
}
.girl img{ 
     margin-top: -50px;
}



.redbox{   
    float: left; 
    padding-right: 10px;   
    position: relative;
}
.red_bg{
    margin-left: -8px; 
    position: absolute;
    z-index: 99;
}
.red1{
    margin-top: 0px;
    margin-left: 8px;
}
.red2{
    margin-top: 23px;
}
.red3{
    margin-top: 50px;
}
.red_color2{
    width:200px;
    float: left;
    height: 96px;
    position: absolute;
    background: rgba(227,47,47,0.7);
    -webkit-animation: red_color 1s ease;
}
.red_color3{
    width:200px;
    float: left;
    height: 96px;
    left: 50px;
    position: absolute;
    background: rgba(227,47,47,0.7);
    -webkit-animation: red_color 1s ease 0.2s;
}
.textbox2{
    position: absolute;
    top: 50%;
    left: 6%;
}
@-webkit-keyframes summer_img2{
    0%{
        opacity: 0.5;
        -webkit-transform: translateX(100px);}
    100%{
        opacity: 1;   
        -webkit-transform: translateX(0px);}
}
